<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>双大括号</h2>
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p>
    <p v-text="msg">
    </p>
    <p v-html="msg"></p>
<h2>强制数据绑定</h2>
<!--<img src="imgUrl"> 以下两种方式都可以的-->
 <img v-bind:src="imgUrl">
 <img :src="imgUrl">
<h2>绑定事件监听</h2>
    <button v-on:click="test">按钮</button>
    <button @click="test">按钮</button>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: '<a href="http://www.baidu.com">百度</a>',
            imgUrl: 'https://cn.vuejs.org/images/logo.png'
        },
        methods:{
            test () {
                alert('呵呵')
            }
        }
    })
</script>
</body>
</html>